<script setup>
    import { ref, reactive, toRefs } from 'vue'
    import api from '@/api'
    import { ElMessage } from 'element-plus'
    import List from '@/components/List/index.vue'
    
    const router = useRouter()

    const data = reactive({
        table: false,
        drawer: false,
        dialog: false,
        loading: false,
        active: 0,
        formLabelWidth: '80px',
        timer: null,
        formData: {
            code: '',
            name: '',
            mName: '',
            supplier: '',
            number: '',
            unit: '',
            createTime: '',
            newOld: '',
        },
        registerNewDeviceForm: {
            eId: '',
            date: new Date(),
            date2: new Date(),
            user1: '',
            userId1: '',
            user2: '',
            userId2: '',
            d1: '',
            dId1: '',
            remark: '',
    
            
        }
    })
    
    const ruleFormRef = ref()
    
    const rules = reactive({
        eId: [{ required: true, message: '请输入ID！', trigger: 'blur' },],
    })
    
    const next = () => {
        if (active.value < 3) { active.value = active.value + 1 }
    }
    const before = () => {
        if (active.value > 0) { active.value = active.value - 1 }
        console.log('before', active)
    }
    
    const submit = async (state) => {
        if (!ruleFormRef.value) return
        await ruleFormRef.value.validate((valid, fields) => {
            if (valid) {
                return new Promise(resolve => {
                    api.post('api/action/scrap', data.registerNewDeviceForm)
                        .then(res => {
                            if (res.c === 0) {
                                ElMessage({
                                    message: '报废成功',
                                    type: ''
                                })
                            } else {
                                ElMessage({
                                    message: res.m,
                                    type: 'error'
                                })
                            }
                            
                        })
                })
            
                    
                 } else {
                ElMessage({
                    type: 'error',
                    message: Object.values(fields).map(i => i[0].message).join()
                })
            }
        })
    }
    
    const handleClick = incomingValue => {
        
        if(!incomingValue) {
            return
        }
    
        data.registerNewDeviceForm.eId = incomingValue.id
    
        for(let i in incomingValue) {
            if(i in data.formData) {
                data.formData[i] = incomingValue[i]
            }
        }
        
        data.registerNewDeviceForm.remark = ''
            
    }
    
    
    const querySearchUser = (str, cb) => {
        api.post('api/mgr/userList', {
            'deptId': '4',
            'name': str,
        }).then(res => {
            cb(res.d.records.slice(0, 5).map(i => ({...i, 'value': i.name})))
        })
    }
    
    const handleSelectUser = item => {
        data.registerNewDeviceForm.userId = item.id
    }


    
 
    const reset = () => {
        data.formData = {
            code: '',
            name: '',
            mName: '',
            supplier: '',
            number: '',
            unit: '',
            createTime: '',
            newOld: '',
        }
        data.registerNewDeviceForm = {
            eId: '',
            date: new Date(),
            user: '',
            userId: '',
           
            remark: '',
    
            
        }
    }

    const onDblClick = rtr => {
        router.push(rtr)
    }
    
    const {
        table,
        drawer,
        dialog,
        loading,
        active,
        formLabelWidth,
        timer,
        formData,
        registerNewDeviceForm
    } = toRefs(data)
    </script>
    
    <template>
        <div>
            <page-main>
                <List @handleClick="handleClick" status="1" />
    
                <!-- <el-button type="primary" style="margin-top: 20px;" @click="dialog = true">设备发放</el-button> -->
                    
                <!-- <el-drawer
                    ref="drawer"   
                    v-model="dialog"			
                    title="设备发放"
                    direction="rtl"
                    custom-class="demo-drawer"
                    size="80%"
                > -->
                <el-card style="margin-top: 40px;">
                    <div class="drawer__content">
                        <!--新设备登记第一步表单1-->
                        <el-form :inline="true" ref="ruleFormRef"
                            :rules="rules"
                            :model="registerNewDeviceForm"
                            label-position="left"
                            label-width="100px"
                            >
                            
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备编号">
                                        <el-input  disabled v-model="formData.code" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="设备名称">
                                        <el-input  disabled v-model="formData.name" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备型号">
                                        <el-input  disabled v-model="formData.mName" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="设备单位">
                                        <el-input  disabled v-model="formData.unit" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="数量">
                                        <el-input  disabled v-model="formData.number" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                           
                        
                            <!--第一行-->
                            <el-row :gutter="36">
                                
                                <el-col :span="12">
                                    <el-form-item label="回收日期：">
                                        <el-date-picker  type="date" v-model="registerNewDeviceForm.date" placeholder="输入时间" />
                                    </el-form-item>
                                </el-col>
                         
                                <el-col :span="12">
                                    <el-form-item label="验收人" @dblclick.native="onDblClick('/system/staff/staffManage/delivery')">
                                        <el-autocomplete 
                                            v-model="registerNewDeviceForm.user" 
                                            :fetch-suggestions="querySearchUser"
                                            @select="handleSelectUser"
                                            placeholder="请输入维修人"
                                            />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="报废日期：">
                                        <el-date-picker  type="date" v-model="registerNewDeviceForm.date2" placeholder="输入时间" />
                                    </el-form-item>
                                </el-col>
                                
                                <el-col>
                                    <p style="float: left">备注：</p>
                                    <el-input  v-model="registerNewDeviceForm.remark" type="textarea" :rows="5" placeholder="请输入内容" />
                                </el-col>
                                <el-col style="margin-left: 80%; transform: translateX(-50%); margin-top: 30px;">
                                    <el-button type="primary" :loading="loading" @click="submit">维&nbsp;&nbsp;&nbsp;&nbsp;修</el-button>
                                    <el-button type="primary" :loading="loading" @click="reset">重&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                <!-- </el-drawer> -->
                </el-card>
            </page-main>
        </div>
    </template>
    